/**
 * title: Overview
 */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { WingBlank, InputItem, Checkbox, Button, Icon } from 'antd-mobile'
import { connect } from 'dva'
import { Form } from 'antd'

// import LanguageSwitch from '../../components/LanguageSwitch'
// import { async } from 'q'
// import { debug } from 'util'

import styles from './index.less'

class Overview extends Component {
  static propTypes = {
    loading: PropTypes.object,
    dispatch: PropTypes.func
  }

  state = {
    todoList: [],
    data: [],
    type: 'all'
  }
  componentDidMount() {
    const { dispatch } = this.props

    dispatch({
      type: 'overview/getTodoList'
    })
  }

  handleChange = e => {}

  // 添加
  handleAdd = e => {
    let key = window.event.keyCode
    const { dispatch } = this.props
    let inputValue = e.target.value

    if (key === 13) {
      let idLen = this.state.newList.length
      let newList = {
        id: idLen,
        task: inputValue,
        completed: false,
        disabled: false
      }
      dispatch({
        type: 'overview/addTodo',
        payload: newList
      })
      console.log(this.input)
    }
  }

  // checked选中
  handleCheckbox = (index, e) => {
    const { todoList } = this.props.overview
    todoList[index].completed = !todoList[index].completed
    todoList[index].disabled = !todoList[index].disabled

    this.setState({
      todoList: todoList
    })
  }

  //  删除功能
  handleDelete = index => {
    const { dispatch } = this.props
    const obj = {
      id: index
    }
    dispatch({
      type: 'overview/delete',
      payload: obj
    })
  }

  //completed
  handleCompleted = () => {
    const { dispatch } = this.props
    dispatch({
      type: 'overview/completed'
    })
    // const {todoList} = this.props.
  }

  // active
  handleActive = () => {
    const { dispatch } = this.props
    dispatch({
      type: 'overview/active'
    })
  }

  // 所有的
  handleAll = () => {
    const { dispatch } = this.props
    dispatch({
      type: 'overview/all'
    })
  }

  render() {
    // const { type } = this.state
    const { todoList } = this.props.overview

    console.log(todoList)
    const List = todoList.map((item, index) => {
      return (
        <div key={index} style={{ fontSize: 18, padding: '10 0' }}>
          <InputItem
            type="text"
            style={{ fontSize: '14px' }}
            disabled={item.disabled}
            ref={input => (this.input = input)}
            defaultValue={item.task}
          >
            <Checkbox
              style={{ paddingRight: 10 }}
              id={item.id}
              checked={item.completed}
              onChange={this.handleCheckbox.bind(this, index)}
            />
            <span
              style={{ color: 'red', position: 'absolute', right: '10px' }}
              onClick={() => {
                this.handleDelete(item.id)
              }}
            >
              <Icon type="cross" />
            </span>
          </InputItem>
          <span className={item.checked ? '' : ''} />
        </div>
      )
    })

    return (
      <WingBlank size="md">
        <Form>
          <div style={{ width: 300 }}>
            <div className={styles.boxstyle}>
              {/* <Form.Item>
            </Form.Item> */}
              <InputItem
                type="text"
                ref={input => (this.input = input)}
                onKeyDown={this.handleAdd.bind(this)}
                placeholder="what needs to be done?"
                // value={this.state.value}
                // onChange={this.handleChange}
              />

              {List}

              <div style={{ padding: '0 30px', marginTop: '30px', display: 'flex', justifyContent: 'space-between' }}>
                <Button type="ghost" inline size="small" onClick={this.handleAll}>
                  All
                </Button>
                <Button type="ghost" inline size="small" onClick={this.handleActive}>
                  Active
                </Button>
                <Button type="ghost" inline size="small" onClick={this.handleCompleted}>
                  Completed
                </Button>
              </div>
            </div>
          </div>
        </Form>
      </WingBlank>
    )
  }
}

Overview.propTypes = {
  overview: PropTypes.object
}

export default connect(({ app, overview }) => {
  return {
    overview
  }
})(Overview)
